<template>
    <lay-card>
      <lay-form :model="user_info" required>
        <lay-form-item label="选择产品|角色" prop="new_password" mode="inline">
          <lay-row space="10" v-for="product in user_info_cur.products">
            <lay-col md="12">
              <lay-select v-model="product.product_id" style="width: 120px">
                <lay-select-option :value="item.id" :label="item.name" v-for="item in products"></lay-select-option>
              </lay-select>
            </lay-col>
            <lay-col md="12">
              <lay-select v-model="product.role" style="width: 120px;margin-left: 20px">
                <lay-select-option :value="item.id" :label="item.name" v-for="item in roles"></lay-select-option>
              </lay-select>
            </lay-col>
          </lay-row>
        </lay-form-item>
        <lay-form-item style="text-align: center;">
          <lay-button type="primary" @click="submitSetRole">修改密码</lay-button>
        </lay-form-item>
      </lay-form>
    </lay-card>
</template>

<script lang="ts">
export default {
    name: "setRole"
}
</script>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {setUserRole} from "../../api/module/user";
import {layer} from "@layui/layui-vue";

const user_info_cur = reactive({user_no: '', products: [{ product_id: 1,  role: 0}]});
const products = ref([]);
const roles = ref([{id: 0, name: '管理员'}, {id: 1, name: '普通用户'}])
const {user_info} = defineProps({
  user_info: {type: Object, default: {}},
})

onMounted(() => {
    user_info_cur.user_no = user_info.user_no;
    products.value = user_info.products;
})

const submitSetRole = async () => {
  let {result, status, message} = await setUserRole(user_info_cur);
  layer.msg(message)
}

</script>

<style scoped>

</style>